/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div style="height: 100%;width: 100%">
        <sf-e-charts v-show="!isEmpty"
                     ref="line"
                     :options="lineOptions"
                     :autoDestroy="false"
                     :autoRefresh="true"></sf-e-charts>
        <empty-panel v-show="isEmpty"
                     :title="_('暂无数据')"/>
    </div>
</template>

<script>
import EmptyPanel from 'src/components/empty_panel.vue';
import {encodeDate} from "src/util/format";
import {getDefaultTypeConfig, getYConfig} from "src/home/mod_cluster/common/resource/const";

export default {
    components: {
        EmptyPanel
    },
    props: {
        forMat: {
            type: String,
            default: 'H:i'
        },
        type: {
            type: String
        },
        time: {
            type: String
        },
        areaColor: {
            type: String,
            default: '#edf4fb'
        },
        lineColor: {
            type: String,
            default: '#4D8DD9'
        },
        gridPosition: {
            type: Object,
            default: () => {
            }
        },
        xShow: {
            type: Boolean,
            default: true
        },
        lineChartsData: {
            type: Array,
            default: () => ([])
        }
    },
    data() {
        return {
            isEmpty: false,
            num: 0,
            lineOptions: {},
            xy_axis: [],
            maxY: 0,
            isFirst: true,
        }
    },
    watch: {
        lineChartsData: {
            deep: true,
            handler() {
                if (this.lineChartsData.length === 0) {
                    this.updateIsEmpty(true)
                } else {
                    this.resizeLine()
                    this.updateIsEmpty(false)
                }
            }
        },
    },
    methods: {
        
        updateIsEmpty(val) {
            this.isEmpty = val;
        },
        
        resizeLine() {
            this.handlerData();
            this.$nextTick().then(() => {
                this._initLineChart();
            });
        },
        
        handlerData() {
            let vm = this;
            vm.xy_axis = [];
            
            this.maxY = Math.max(...this.lineChartsData.map(item => item.y));
            
            for (let i = 0; i < vm.lineChartsData.length; i++) {
                let seriesItem = vm.lineChartsData[i];
                vm.xy_axis.push([encodeDate(Number(seriesItem.x)), Number(seriesItem.y)])
            }
        },
        
        _initLineChart() {
            
            if (this.$refs.line) {
                this.$refs.line.destroy();
            }
            
            let vm = this;
            this.lineOptions = {
                animation: this.isFirst,
                grid: {
                    top: 30,
                    right: 20,
                    bottom: 20,
                    left: 35
                },
                title: {
                    textStyle: {
                        fontSize: '12px',
                        color: '#FFF',
                        fontFamily: 'Microsoft Yahei'
                    }
                },
                xAxis: {
                    type: 'time',
                    show: true,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: (val) => {
                            return encodeDate(val, 'H:i');
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    ...getDefaultTypeConfig(vm.time)
                },
                yAxis: {
                    type: 'value',
                    axisTick: { // y轴线刻度
                        show: false
                    },
                    axisLine: { // y轴线
                        show: false
                    },
                    axisLabel: {
                        color: '#999'
                    },
                    splitLine: {    // y轴分割线
                        show: true,
                        lineStyle: {
                            color: '#eee'
                        }
                    },
                    ...getYConfig(vm.type, {
                        yMax: vm.maxY
                    })
                },
                tooltip: {
                    trigger: 'axis',
                    transitionDuration: 0,
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: vm.lineColor,
                            fontSize: 12
                        }
                    },
                    backgroundColor: '#fff',
                    textStyle: {
                        fontSize: 12,
                        color: '#333'
                    }
                },
                series: [
                    {
                        type: 'line',
                        showSymbol: false,
                        data: vm.xy_axis,
                        areaStyle: {
                            color: vm.areaColor
                        }
                    }
                ],
                color: vm.lineColor
            }
            
            this.isFirst = false;
        }
    }
}
</script>
